﻿@using System.Text
@using System.Xml
@using System.Xml.XPath
@using umbraco
@using umbraco.presentation.nodeFactory
@{
    var topDescription = string.Empty;
    var bottomTel = string.Empty;
    var topImage = string.Empty;
    var bottomImage = string.Empty;
    var topImageLink = string.Empty;
    var bottomImageLink = string.Empty;
    var telLink = string.Empty;
    XPathNodeIterator currentNode = library.GetXmlNodeCurrent();

    //get the top information and the bottom information
    if(currentNode.Current != null)
    {
        int topImageId = Int32.Parse(currentNode.Current.SelectSingleNode("topImage").InnerXml);
        topImage = library.GetMedia(topImageId , true).Current.SelectSingleNode("Image").SelectSingleNode("umbracoFile").InnerXml;
        int bottomImageId = Int32.Parse(currentNode.Current.SelectSingleNode("bottomIamge").InnerXml);
        bottomImage = library.GetMedia(bottomImageId , false).Current.SelectSingleNode("Image").SelectSingleNode("umbracoFile").InnerXml;
        topImageLink = currentNode.Current.SelectSingleNode("topimagelink").ToString();
        bottomImageLink = currentNode.Current.SelectSingleNode("bottomiamgelink").ToString();
        telLink = currentNode.Current.SelectSingleNode("tellink").ToString();
        topDescription = currentNode.Current.SelectSingleNode("topDescription").ToString();
        int bottomTelId = Int32.Parse(currentNode.Current.SelectSingleNode("bottomTel").InnerXml);
        bottomTel = library.GetMedia(bottomTelId , false).Current.SelectSingleNode("Image").SelectSingleNode("umbracoFile").InnerXml;
    }
}
<link href="../scripts/sencha-touch-2.1.0/resources/css/sencha-touch.css" rel="stylesheet" type="text/css" />
<script src="../scripts/sencha-touch-2.1.0/sencha-touch-all.js" type="text/javascript"></script>
<script type="text/javascript">
    //get the lists information
    @{
        string xmlString = "<root>" + currentNode.Current.InnerXml + "</root>";
        XmlDocument xdoc = new XmlDocument();
        xdoc.LoadXml(xmlString);

        //get the one level items
        @:var dataList={text: 'Menu',items: [
        for(int i = 0;i < xdoc.ChildNodes[0].SelectNodes("EntryPage").Count;i++)
        {
            string str = "[";
            string EntryPageTitle = xdoc.ChildNodes[0].SelectNodes("EntryPage")[i].Attributes["nodeName"].Value;
            for(int j = 0;j < xdoc.ChildNodes[0].SelectNodes("EntryPage")[i].SelectNodes("EntryPageItem").Count;j++)
            {
                var EntryPageItemTitle = xdoc.ChildNodes[0].SelectNodes("EntryPage")[i].SelectNodes("EntryPageItem")[j].Attributes["nodeName"].Value;
                int EntryPageItemLinkId=Int32.Parse(xdoc.ChildNodes[0].SelectNodes("EntryPage")[i].SelectNodes("EntryPageItem")[j].Attributes["id"].Value);
                var EntryPageItemLink = library.NiceUrl(EntryPageItemLinkId);
                str += "{title:'" + EntryPageItemTitle + "', leaf: true,link:'" + EntryPageItemLink + "' },";
            }
            if(str == "[")
            {
                str += "]";
            }
            else
            {
                str = str.Substring(0 , str.Length - 1) + "]";
            }
            @:{title: '@EntryPageTitle', items:@Html.Raw(str)},
        }
        @:]};
    }
    Ext.application({
        name: "List",
        launch: function () {
            // Set up a model to use in our Store
            Ext.define('ListItem', {
                    extend: 'Ext.data.Model',
                    config: {
                        fields: [
                            { name: 'title', type: 'string' },
                            { name: 'link', type: 'string' }
                        ]
                    }
                });

            var stores = Ext.create('Ext.data.TreeStore', {
                model: 'ListItem',
                defaultRootProperty: 'items',
                root: dataList
            });

            var nestedList = Ext.create('Ext.NestedList', {
                flex:"70",
                title: 'Navigation',
                displayField: 'title',
                store: stores,
                getItemTextTpl: function(){
                        return '<tpl if="leaf==true">' +
							   '<a href={link} style="text-decoration: none;color:#000;width:100%">{title}</a>' +
							   '</tpl>' +
							   '<tpl if = "leaf!=true">{title}</tpl>';
                }
            });
            Ext.create("Ext.Panel", {
                fullscreen: true,
                monitorOrientation: true,
                margin: "0",
                padding: "0",
                layout: {
                    type: "vbox",
                    align: "stretch"
                },
                items: [
                    {//top iamge
                        flex:"15",
                        docked:"top",
                        width: "100%",
                        margin: "0",
                        html: "<div style='text-align:center; background-color: #0a86ad;height:10%'><a href='@topImageLink' target='_blank'><img alt='' src='@topImage' style='max-width:650px;max-height:100px' height='10%' width='100%'/></a></div>" +
                        "<div style='height:5%;line-height: 28px;text-align: center;color: #535455;font-size: 18px;height:5%;padding:5px;max-height:60px'>@topDescription</div>"
                    },
                    nestedList,//lists
                    {//bottom
                        flex:"15",
                        docked: "bottom",
                        width: '100%',
                        style: 'text-align:center;',
                        margin: '0',
                        padding:"0",
                        html: "<div style:'height:5%'><a tel:@telLink><img alt='' src='@bottomTel' style='max-width:300px;max-height:40px' height='5%' width='60%'/></a></div>" +
                        "<div style='height:10%;background-color: #0a86ad;text-align:center;padding:5 0 0 0'><a href='@bottomImageLink' target='_blank'><img alt='' src='@bottomImage' style='max-width:650px;max-height:80px' height='10%' width='100%'/></div></div>"
                    }
                ]
            });
        }
    });
</script>
<body>
</body>
